{% extends "management/base.html" %}
{% load staticfiles %}


{% block title %}制图{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-treeview.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-table.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-slider.css' %}">
    <link rel="stylesheet" href="{% static 'css/svgNavigator.css' %}">
    <div class="mycontainer">
        <div class="row">

            <div class="col-md-2">
                <div class="panel panel-primary" style="margin-bottom: 0px">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#collapse-1" aria-expanded="true"
                               aria-controls="collapse-1">操作</a>
                        </h4>
                    </div>
                </div>
                <div class="list-group collapse" id="collapse-1">
                    <a class="list-group-item pointer" id="btn-load" data-toggle="modal" data-target="#basemap_modal">加载底图</a>
                    <a class="list-group-item pointer" id="btn-upload" data-toggle="modal" data-target="#data_modal">载入数据</a>
					<a class="list-group-item pointer" id="btn-table" data-toggle="modal" data-target="#table_modal">显示数据</a>
                    <a class="list-group-item disabled" id="btn-carto" data-toggle="modal" data-target="">可视化</a>
                    
                    {#                    <a class="list-group-item pointer" id="btn-table" data-toggle="modal" data-target="#text_modal">编辑元素</a>#}
                    <a class="list-group-item pointer" id="btn-save">保存</a>
                </div>
                <div class="panel panel-primary" style="margin-bottom: 0px;margin-top: 10px">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#id_layer_panel" aria-expanded="true"
                               aria-controls="collapse-1" id="id_layer_control">图层</a>
                        </h4>
                    </div>
                </div>
                <div class="list-group collapse" id="id_layer_panel">
                </div>
                <ul class="dropdown-menu" id="layer-context-menu">
                    <li>
                        <a id="id_item_edit" class="pointer" data-toggle="modal" data-target="#text_modal">编辑</a>
                    </li>
                    <li>
                        <a id="id_item_delete" class="pointer">删除</a>
                    </li>
                </ul>
            </div>

            <div class="col-md-10">
                <div id="svg_panel" class="panel panel-default"
                     style="margin-bottom: 0px;height:550px;background-color: #F1F1F1">
                </div>
            </div>

            <div class="toolbarcontainer2">
                <div class="toolbar">
                    <div id="id_zoom_in" class="toolbarbutton">+</div>
                    <div id="id_zoom_out" class="toolbarbutton toolbarbuttonborder">-</div>
                    <div id="id_zoom_reset" class="toolbarbutton toolbarbuttonborder">重置</div>
                    <div id="id_zoom_box" class="toolbarbutton">拉框</div>
                </div>
            </div>
            {% include "management/basemap_modal.html" %}
            {% include "management/data_modal.html" %}
            {% include "management/carto_modal.html" %}
            {% include "management/table_modal.html" %}
            {% include "management/text_modal.html" %}
        </div>
    </div>
    <script type="text/javascript" src="{% static 'js/snap.svg.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/callback.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/stringvalue.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/color.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/chart.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/svg-download.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/svg-navigator.js' %}"></script>
    <script src="{% static "js/bootstrap-select.min.js" %}"></script>
    <script src="{% static "js/bootstrap-checkbox.js" %}"></script>
    <script src="{% static "js/bootstrap-treeview.js" %}"></script>
    <script src="{% static "js/bootstrap-slider.js" %}"></script>
    <script src="{% static "js/bootstrap-table.js" %}"></script>
    <script src="{% static "js/bootstrap-table-export.js" %}"></script>
    <script src="{% static "js/bootstrap-table-exports.js" %}"></script>
    <script src="{% static "js/bootstrap-table-editable.js" %}"></script>
    <script src="{% static "js/bootstrap-table-editables.js" %}"></script>
    <script src="{% static "js/calculator.js" %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $contextmenu = $("#layer-context-menu");
            $("#id_layer_panel").on("contextmenu", function (e) {
                event.preventDefault();
            });
            $("#id_layer_panel").on("mousedown", function (e) {
                if (e.button == 2) {
                    $contextmenu.hide();
                    $contextmenu.attr("style", "display: block; position: fixed; top:" + e.clientY + "px; left:" + e.clientX + "px; width: 50px;");
                    $contextmenu.fadeIn(200);
                }
                if (event.button == 0 || event.button == 1) {
                    $contextmenu.stop().fadeOut(200);
                }
                event.preventDefault();
            });

            $("#btn-load").click(function () {
{#                onloadsvg("/media/basesvg/all_1400_ecotemp.svg", "all_1400_ecotemp", "svg_panel");#}
{#                setTimeout("svg_navigator()", 2000);#}
            });
            $("#id_item_edit").on("click", function () {
                $contextmenu.stop().fadeOut(200);
                var selected = $("#id_layer_panel").treeview("getSelected");
                if (selected && selected[0].tags) {
                    var item = selected[0].tags[0];
                    if (item) {
                        var text = $("#" + item).html();
                        $("#id_svg_text").val(text);
                        $("#id_svg_id").text(item);
                    }
                }
            });
            $("#id_item_delete").on("click", function () {
                $contextmenu.stop().fadeOut(200);
                var selected = $("#id_layer_panel").treeview("getSelected");
                if (selected && selected[0].tags) {
                    var item = selected[0].tags[0];
                    if (item) {
                        $("#" + item).remove();
                    }
                }
            });
            $("#btn-save").click(function () {
                svg_download();
            });
            $("#id_layer_control").click(function () {
                var options = {
                    bootstrap2: true,
                    showTags: true,
                    levels: 0,
                    data: buildDomTree()
                };
                $('#id_layer_panel').treeview(options);
            });
        })
        ;
        function buildDomTree() {
            var data = [];

            function walk(nodes, data) {
                if (!nodes) {
                    return;
                }
                for (var i = nodes.length - 1; i >= 0; i--) {
                    node = nodes[i];
                    if (node.nodeName == "desc" || node.children.length <= 1)
                        continue;
                    var obj = {
                        id: node.getAttribute("id"),
                        text: node.nodeName,
                        tags: [node.childElementCount > 0 ? node.getAttribute("id") : '']
                    };
                    if (node.childElementCount > 0) {
                        obj.nodes = [];
                        walk(node.children, obj.nodes);
                    }
                    data.push(obj);
                }
            }

            walk($('svg')[0].children, data);
            return data;
        }
    </script>
{% endblock %}